import {ClassTypeMap, SizeTypeMap} from "@/common/map";

export default defineComponent({
    // 定义默认属性
    props: {
        // 按钮尺寸，large，normal，small，mini
        size: {
            type: String as PropType<SizeType>,
            default: "normal",
            validator: (value: string): boolean =>
            {
                return SizeTypeMap.includes(value);
            }
        },
        // 文本
        text: {
            type: String,
            default: ""
        },
        // 预制样式
        type: {
            type: String as PropType<ClassType>,
            default: "info",
            validator: (value: string): boolean =>
            {
                return ClassTypeMap.includes(value);
            }
        },
        // 边框
        border: {
            type: Boolean,
            default: true
        },
        // 圆角
        radius: {
            type: [String, Number] as PropType<SizeType | string | number>,
            default: "mini"
        },
        // 按钮形状，circle（两边为半圆），square（带圆角）
        shape: {
            type: String as PropType<ShapeType>,
            default: "square",
            validator: (value: string): boolean =>
            {
                return ["circle", "square"].includes(value);
            }
        },
        // 按钮是否镂空
        plain: {
            type: Boolean,
            default: false
        },
        // 是否禁用
        disabled: {
            type: Boolean,
            default: false
        },
        // 是否加载中
        loading: {
            type: Boolean,
            default: false
        },
        // 加载中文本
        loadingText: {
            type: String,
            default: ""
        },
        // 加载图标距离文本的间距（单位：px）
        loadingSpacing: {
            type: [String, Number],
            default: 4
        },
        // loading图标大小（单位：px）
        loadingSize: {
            type: [String, Number],
            default: 16
        },
        // loading样式
        loadingMode: {
            type: String as PropType<LoadingType>,
            default: "spinner"
        },
        // loading速率
        loadingDuration: {
            type: Number,
            default: 1000
        },
        // 自定义按钮背景色
        backgroundColor: {
            type: String,
            default: ""
        },
        // 自定义文字颜色
        color: {
            type: String,
            default: ""
        },
        // 按住后多久出现点击态（单位：ms）
        hoverStartTime: {
            type: Number,
            default: 20
        },
        // 手指松开后点击态保留时间（单位：ms）
        hoverStayTime: {
            type: Number,
            default: 70
        },
        // 提交类型
        formType: {
            type: String as PropType<ButtonType>,
            default: "button",
            validator: (value: string): boolean =>
            {
                return ["submit", "reset", "button"].includes(value);
            }
        },
        // 按钮图标
        icon: {
            type: String,
            default: ""
        },
        // 按钮图标大小
        iconSize: {
            type: [String, Number],
            default: ""
        },
        // 按钮图标颜色
        iconColor: {
            type: String,
            default: ""
        },
        // 按钮图标边距（单位：px）
        iconSpacing: {
            type: [String, Number],
            default: 4
        },
        // 按钮图片
        iconImage: {
            type: String,
            default: ""
        },
        // 按钮图片宽度（单位：px）
        iconImageWidth: {
            type: [String, Number],
            default: ""
        },
        // 按钮图片高度（单位：px）
        iconImageHeight: {
            type: [String, Number],
            default: ""
        },
        // 按钮图片边距（单位：px）
        iconImageSpacing: {
            type: [String, Number],
            default: 4
        },
        // 开放能力
        openType: {
            type: String as PropType<OpenType>,
            default: ""
        },
        // 是否阻止事件传播
        stop: {
            type: Boolean,
            default: false
        },
        // 是否阻止事件默认行为
        prevent: {
            type: Boolean,
            default: false
        }
    }
});